<template>
  <div class="qckc">
    <el-button
      type="primary"
      @click="fanhui"
      style="margin-bottom: 20px; width: 100px; height: 40px"
      >返回</el-button
    >

    <div class="content">
      <div class="con-head">
          <h4>服务单信息</h4>
          <el-button
            type="primary"
            style="margin: 10px 0 0 0; width: 100px; height: 40px"
            >查看押金条</el-button
          >
      </div>
      <div class="con-foot">
          <div class="cf-left">
              <p>服务单号：0201012200923000</p>
              <p>申请账号：135xxxxxxx</p>
              <p>服务申请：退押金</p>
              <p>押桶数：- 4/桶</p>
          </div>
          <div class="cf-model">
              <p>申请时间：2020-10-10 09:22:00</p>
              <p>账户姓名：XX</p>
              <p>退还方式：退桶退押金</p>
              <p>退押地址：湖北省XXX市XXX区XXXXXXXXXXX</p>
          </div>
          <div class="cf-right">
              <p>完成时间：2020-10-10 09:22:00</p>
              <p>微信号：135xxxxxxxx</p>
              <p>服押金数：- 80.00/元</p>
              <p>联系信息：金xxx ,135xxxxxxxx</p>
          </div>
      </div>
    </div>

    <footer>
        <h4 style="border-bottom: 1px solid #bbb;height:60px;line-height:60px">订单信息</h4>
        <el-steps :active="2" align-center style="margin: 20px 0 0 0">
        <el-step
          title="已提交"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step
          title="待处理"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step
          title="处理中"
          description="这是一段很长很长很长的描述性文字"
        ></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <div class="foot">
          <h4>服务单进度详情</h4>
          <div class="foot-content">
              <div
          style="
            width: 92%;
            height: 360px;
            margin: 20px 0 20px 20px;
            overflow-y: auto;
          "
        >
               <el-steps direction="vertical" :active="1">
            <el-step
              v-for="item in approvalSuccessData"
              :key="item.grade"
              :description="
                item.isApprove === 0
                  ? '等待审批'
                  : item.isApprove === 1
                  ? '审批中'
                  : item.isApprove === 2
                  ? '审批通过'
                  : item.isApprove === 3
                  ? '审批不通过'
                  : ''
              "
              :status="
                item.isApprove === 0
                  ? 'wait'
                  : item.isApprove === 1
                  ? 'process'
                  : item.isApprove === 2
                  ? 'finish'
                  : item.isApprove === 3
                  ? 'error'
                  : ''
              "
            >
              <template slot="title">
                <div class="title_wrap" style="width:50%;display: flex;
        justify-content: space-between;">
                  <span class="name">{{ item.userName }}</span>
                  <span class="date" >{{
                    item.approvalDate
                  }}</span>
                </div>
              </template>
            </el-step>
          </el-steps>
          </div>
      </div>
       </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
        approvalSuccessData: [
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "ff25f286dd5d0b10ba18e779b2977f94",
          userName: "服务单处理完成",
          isApprove: 2,
          approvalDate: "2020-10-05 23:00:00",
          grade: 1,
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "改派派送员：123",
          isApprove: 0,
          grade: 2,
          approvalDate: "2020-10-05 23:00:00",
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "分配派送员:123",
          isApprove: 0,
          grade: 3,
          approvalDate: "2020-10-05 23:00:00",
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "系统交由 XXXX网点 处理",
          isApprove: 0,
          grade: 4,
          approvalDate: "2020-10-05 23:00:00",
        },
        {
          requestId: "c16374401369f1b5a05f094d651cce74",
          userId: "9e22f6feba9411e99092fa163e6c79ee",
          userName: "用户提交了服务单",
          isApprove: 0,
          grade: 5,
          approvalDate: "2020-10-05 23:00:00",
        },
      ], // 审批进度数据
    };
  },
  methods: {
    fanhui() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  overflow: hidden;
    
  .content {
    //  height: 1100px;
    height: 220px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 4%;
    overflow: hidden;

      .con-head {
        overflow: hidden;
        border-bottom: 1px solid #bbb;
        display: flex;
        justify-content: space-between;
      }
    .con-foot{
        display: flex;
        justify-content: space-around;
    }
  }
  footer {
    height: 800px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 0 4%;
    .foot {
      width: 80%;
      margin-left: 10%;
      .foot-content{
          width: 100%;
          height: 400px;
          border: 1px solid #bbb;
      }
    }
  }
}
</style>